<template>
  <s-layout title="修改店铺名称" leftIcon="|">
    <view class="storeEditName-wrap" :style="`height: calc( 100vh - ${pageHeight}px)`">
      <view class="input-name">
        <input class="uni-input" v-model="state.storeName" @input="onKeyInput" placeholder="请输入店铺名称" />
      </view>
      <view class="acitons">
        <view class="footer" @tap="handleSave">保存</view>
      </view>
    </view>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { isEmpty } from 'lodash';

const state = reactive({
  storeName: ''
});

const pageHeight = computed(() => {
  console.log(sheep.$platform.device.statusBarHeight, 'statusBarHeight')
  console.log(sheep.$platform.device.safeAreaInsets.bottom, 'safeAreaInsets')
  return sheep.$platform.device.statusBarHeight + sheep.$platform.device.safeAreaInsets.bottom + 44 + 48
})

const onKeyInput = val => {
  console.log(val,'val')
  console.log(state.storeName,'storeName')
}

const handleSave = () => {
  if (state.storeName == '') {
    uni.showToast({
      title: '请输入店铺名称',
      icon: 'none',
    });
    return
  }
  
}

onLoad(options => {
  console.log('storeEditName', options);
  state.storeName = options.name
});

</script>
<style lang='scss' scoped>
.storeEditName-wrap {
  background-color: #eee;
  padding-top: 48rpx;
  .input-name {
    margin: 0 32rpx;
    
    box-sizing: border-box;
    background: #FFFFFF;
    padding: 0 32rpx;
    color: #484848;
    font-size: 28rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    border-radius: 8rpx;
  }
  .acitons {
    width: calc(100% - 64rpx);
    position: fixed;
    bottom: 174rpx;
    left: 32rpx;
    .footer {
      background: linear-gradient(0deg, #003194 0%, #5DB1FF 100%);
      width: 100%;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
}
</style>